<template>
	<view class="mallBox">
		<view class="navBox">
			<scroll-view class="mallscorll" scroll-y="true">
				<view class="item" v-for="dt in navs" :class="{'selected':dt.id == commodityType}" :key="dt.id" @click="setTab(dt.id)">{{dt.name}}</view>
			</scroll-view>
		</view>
		<view class="content">
			<scroll-view class="mallscorll" @scrolltolower="getList" scroll-y="true">
				<view class="listUl">
					<view class="item" v-for="(dt,index) in (lists || [])" :key="index">
						<view class="lkto" @click="goDetail(index)">
							<view class="imgbox">
								<!-- <my-Image class="ing" :src="dt.commodityPic" mode="aspectFill"/> -->
								<image class="ing" :src="dt.commodityPic || '/static/imgs/default.png'" mode="aspectFill"></image>
							</view>
							<text class="title">{{dt.commodityName}}</text>
							<text class="price">{{dt.unitPrice}}个积分</text>
						</view>
					</view>
					<empty  v-if="lists && lists.length<1"/>
				</view>
				<!-- <uni-load-more :status="status" /> -->
			</scroll-view>
			
		</view>
	</view>
</template>

<script>
	import empty from "@/components/empty/empty.vue"
	import {geMallList} from '@/api/index.js'
	//import myImage from "@/components/myImage/myImage.vue"
	export default {
		components:{
			empty,
			//myImage
		},
		data() {
			return {
				navs:[
					{id:'',name:'全部分类'},
					{id:'NORMAL',name:'一般商品'},
					{id:'UPGRADE_PACKAGE',name:'升级包'},
					{id:'ASSET_PACKAGE',name:'资产包'}
				],
				commodityType:'',
				number:20,
				status:'loading',
				size:10, // 显示条数
				current:1, // 当前页
				total:0,
				lists:''
			}
		},
		onNavigationBarButtonTap(){ // 监听右侧按钮
			uni.navigateTo({
				url:"/pages/integral/record/record"
			})
		},
		async created() {
			this.getList()
		},
		methods: {
			setTab(id){
				this.commodityType = id
				this.lists = ''
				this.current = 1
				this.getList()
			},
			async getList(){
				console.log("加载更多..........")
				let params = {
					size:this.size,
					current:this.current
				}
				if(this.commodityType){
					params.commodityType = this.commodityType
				}
				const  res = await geMallList(params)
				if(this.lists.length<=res.total){
					this.status = 'loading'
					this.lists = [...this.lists,...res.records]
					this.current++
				}else{
					this.status = 'noMore'
				}
			},
			goDetail(index){
				const item = this.lists[index]  // 之所以传索引index，是为了兼容小程序
				let url = `/pages/integral/mall/details/details?id=${item.id}`
				if(item.allowPayMethod.indexOf('alipay_app')>-1 || item.allowPayMethod.indexOf('wechatpay_app_pay')>-1){
					url = `/pages/integral/mall/upgrade/upgrade?id=${item.id}`
				}
				uni.navigateTo({url})
			}
		}
	}
</script>

<style lang="scss">
	.mallBox{
		box-sizing: border-box;
		display: flex;
		position:fixed;
		z-index: 100;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		overflow: hidden;
		padding: 0;
		font-size: 28rpx;
		.mallscorll{
			height: 100%;
		}
		.navBox{
			width: 180rpx;
			height: 100%;
			overflow: hidden;
			background-color: #fcf7ee;
			.item{
				height: 90rpx;
				line-height: 90rpx;
				font-size: 28rpx;
				text-align: center;
				&.selected{
					background: #f1f1f1;
					color: #238de8;
				}
			}
			
		}
		.content{
			flex: 1;
			height: 100%;
			.listUl{
				box-sizing: border-box;
				padding: 20rpx 20rpx 0 0;
				&::after{
					display:block;
					clear:both;
					content:"";
					visibility:hidden;
					height:0
				}
				.item{
					box-sizing: border-box;
					float: left;
					width: 50%;
					height: 300rpx;
					padding: 0 0 0 20rpx;
					margin: 0 0 10rpx 0;
					.imgbox{
						width: 100%;
						height: 200rpx;
						.ing{
							display: block;
							width: 100%;
							height: 100%;
						}
					}
					.title{
						display: block;
						height: 50rpx;
						line-height: 50rpx;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
						word-break: break-all;
						text-align: center;
						
					}
					.price{
						display: block;
						font-size: 26rpx;
						color: #238de8;
						text-align: center;
					}
				}
			}
		}
	}
	/* #ifdef H5 */
		.mallBox{
			padding-top: 80rpx;
			padding-bottom: 50px;
		}
	/*	#endif */
</style>
